<template>
  <mu-container class="home">
    <mu-appbar class="appbar" color="primary">
      <mu-button icon slot="left">
        <mu-icon value="menu"></mu-icon>
      </mu-button>星月
      <mu-button flat slot="right">LOGIN</mu-button>
    </mu-appbar>

    <mu-list textline="two-line" class="list">
      <mu-list-item avatar button v-for="i of 10" :key="i">
        <mu-list-item-action>
          <mu-avatar>
            <mu-icon value="face"></mu-icon>
          </mu-avatar>
        </mu-list-item-action>
        <mu-list-item-content>
          <mu-list-item-title>用户-{{i}}</mu-list-item-title>
          <mu-list-item-sub-title>Jan 9, 2014</mu-list-item-sub-title>
        </mu-list-item-content>
        <mu-list-item-action>
          <mu-button icon>
            <mu-icon value="info"></mu-icon>
          </mu-button>
        </mu-list-item-action>
      </mu-list-item>
    </mu-list>

    <mu-bottom-nav class="nav">
      <mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
      <mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
      <mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
    </mu-bottom-nav>
  </mu-container>
</template>

<script>
export default {
  components: {},
  data() {
    return {};
  },
  methods: {
    testClick() {
      this.$toast.error({
        message: "消息内容"
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  .appbar {
    width: 100%;
  }

  .list {
    overflow-y: auto;
    flex: 1;
  }
  .nav {
    width: 100%;
  }
}
</style>